<style>
    table td {
        /* vertical-align: middle; */
        text-align: center;
    }

    table th {

        /* vertical-align: middle; */
        text-align: center;
    }
</style>
<main class="lyear-layout-content">

    <div class="container-fluid p-t-15">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" href="{:url('admin/post/cateadd')}"><i
                                    class="mdi mdi-plus"></i>
                                新增</a>
                            <a class="btn btn-danger" id="ajax-remove"><i class="mdi mdi-window-close"></i> 批量删除</a>
                        </div>
                        <!-- 
                        <form class="search-bar ml-md-auto" method="get" action="#!" role="form">
                            <input type="hidden" name="search_field" id="search-field" value="title" />
                            <div class="input-group ml-md-auto">
                                <div class="input-group-prepend">
                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" id="search-btn">昵称</button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#!" data-field="title">昵称</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="keyword" placeholder="请输入相应搜索内容">
                            </div>
                        </form> -->
                    </div>
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-all">
                                                <label class="custom-control-label" for="check-all"></label>
                                            </div>
                                        </th>
                                        <th>分类名称</th>
                                        <th>分类权重</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $catelist as $item}
                                    <tr>
                                        <td style="vertical-align: middle;">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input ids" name="ids[]"
                                                    value="{$item.id}" id="ids-{$item.id}">
                                                <label class="custom-control-label" for="ids-{$item.id}"></label>
                                            </div>
                                        </td>
                                        <td style="vertical-align: middle;">{$item['name']}</td>
                                        <td style="vertical-align: middle;">{$item['weigh']}</td>
                                        <td style="vertical-align: middle;">
                                            <div class="btn-group">
                                                <a class="btn btn-xs btn-default"
                                                    href="{:url('admin/post/cateedit',['id'=>$item.id])}" title=""
                                                    data-toggle="tooltip" data-original-title="编辑"><i
                                                        class="mdi mdi-pencil"></i></a>
                                                <a class="btn btn-xs btn-default ajax-get confirm del" title=""
                                                    data-id="{$item.id}" data-toggle="tooltip"
                                                    data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                        {$catelist->render()}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    layui.use(['layer'], function () {
        let $ = layui.jquery,
            layer = layui.layer


        // 获取的id
        function GetId() {
            // 存放id的数组
            let list = []

            $('input[name="ids[]"]:checked').each(function () {
                // console.log(item);
                list.push($(this).val())
            })

            return list
        }


        //搜索框的点击
        $('.search-bar .dropdown-menu a').click(function () {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text());
        });

        //单选框的删除指定元素
        $('#ajax-remove').click(function () {
            let list = GetId();
            if (list.length == 0) {
                layer.msg('请选择您要删除的选项', { icon: 0 })
            } else {
                layer.confirm('确认删除选中的分类？', { icon: 3, title: '提示' }, function (index) {
                    $.ajax({
                        type: 'post',
                        url: `{:url('admin/post/del')}`,
                        data: {
                            list,
                            action: 'CateRemove'
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res.code === 1) {
                                layer.msg('删除成功', { icon: 1 }, function (index) {
                                    location.href = res.url
                                })
                            } else {
                                layer.msg(res.msg, { icon: 5 })
                            }
                        }
                    })
                    layer.close(index)
                })
            }
        })

        //管理员删除
        $('.del').click(function () {
            let id = $(this).data('id')
            layer.confirm('确认删除该分类？', { icon: 3, title: '提示' }, function (index) {
                //发起请求
                $.ajax({
                    type: 'post',
                    url: `{:url('admin/post/del')}`,
                    data: {
                        id,
                        action: 'CateDel'
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 1) {
                            layer.msg('删除成功', { icon: 1 }, function (index) {
                                location.href = res.url
                            })
                        } else {
                            layer.msg(res.msg, { icon: 5 })
                        }
                    }
                })

                layer.close(index)
            })

        })
    })
</script>